<!DOCTYPE html>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>grid-toolbar</title>
<%@include file="/resource/component.jsp"%>
</head>
<body class="fullBody">
    <div class="nui-toolbar">
        <table style="width:100%;">
            <tr>
                <td style="width:100%;">
                    <a class="nui-button" iconCls="icon-add" plain="true" tooltip="增加...">增加</a>
                    <a class="nui-button" iconCls="icon-remove" plain="true">删除</a>
                    <span class="separator"></span>
                    <a class="nui-button" iconCls="icon-save" plain="true">保存</a>            
                </td>
                <td style="white-space:nowrap;">
                    <input id="key" class="nui-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>   
                    <a class="nui-button" onclick="search()">查询</a>
                </td>
            </tr>
        </table>           
    </div>
    <!-- grid -->
    <div class="nui-fit" >
        <div id="datagrid" class="nui-datagrid" style="width:100%;height:100%;" allowAlternating="true"
            url="../data/data_grid.txt" sizeList="[10,20,30,50]" pageSize="20">
            <div property="columns">
                <div type="indexcolumn" width="30" headerAlign="center" align="center">序号</div>
                <div field="code" width="120" headerAlign="center">编号</div>    
                <div field="name" width="120" headerAlign="center">名称</div>                            
                <div field="userName" width="80" headerAlign="center" align="center">姓名</div>
                <div field="department" width="100" allowSort="true">部门</div>       
                <div field="date" width="80" headerAlign="center" align="center" dateFormat="yyyy-MM-dd">日期</div>                                 
                <div field="remark" width="100" allowSort="true">备注</div>            
            </div>
        </div> 
    </div>
</body>
</html>
<script type="text/javascript">
nui.parse();

var datagrid = nui.get('datagrid');

$(function(){
	var pageSize = parseInt(getQueryString("pageSize"));
	if (isNaN(pageSize)) pageSize = 20;
	
	datagrid.load({ pageSize: pageSize });
	
	// 关闭加载效果
	$("#loading").fadeOut();
})
</script>